<template>
    <div class="wrap">
        <template v-for="(item,index) in list">
            <div :key="item.uuid" class="mmv-row">
                <div class="mmv-col">
                    <el-input v-if="item.canEditLabel" size="mini" clearable v-model="item.label"></el-input>
                    <div class="input" v-else>{{item.label+"  (折扣率%)"}}</div>
                    <template v-if="!readonly">
                        <el-input-number controls-position="right" v-model="item.value" size="mini" :min="0" :max="max" style="margin-left:5px;width: 280px;" :placeholder="'请输入'+text"></el-input-number>
                        <el-button style="margin-left:5px" icon="el-icon-delete" v-if="item.canClose" type="text" @click="$emit('close', item, index)"></el-button>
                    </template>
                    <el-input v-else size="mini" :value="item.value" readonly style="margin-left:5px;width: 280px;"></el-input>
                </div>
                <div class="mmv-col" v-if="showDate">
                    <el-date-picker v-model="item.datepicker" style="width:330px" type="daterange" size="mini" value-format="yyyy-MM-dd" format="yyyy-MM-dd" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期" :disabled="readonly">
                    </el-date-picker>
                </div>
            </div>
        </template>
    </div>
</template>

<script>
export default {
    props: {
        max: {
            type: Number,
            default: Infinity,
        },
        text: {
            type: String,
            default: '价格'
        },
        showDate: {
            type: Boolean,
            default: true,
        },
        list: {
            type: Array,
            default() {
                return [];
            }
        },
        readonly: Boolean,
    },
}
</script>

<style lang="scss" scoped>
.wrap{
  display: flex;
  flex-wrap: wrap;
  margin-top: -20px;
  margin-bottom: 20px;
}
.mmv-row{
  width: 350px;
  margin: 5px;
  padding: 10px;
  border: 1px solid #ddd;
  border-radius: 4px;
  font-size: 12px;
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  position: relative;
}
.mmv-col{
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  position: relative;
  &+&{
    margin-top: 5px;
  }
}
.input{
    position: relative;
    display: inline-block;
    width: 100%;
    padding: 0 15px;
    padding-right: 30px;
}
</style>
